<template>
  <div class="dashboard-container">
    <!-- 第一列 -->
    <div class="leftColumn">
      <!-- 数据总览 -->
      <div v-if="$access('ENT_C_MAIN_OVERVIEW_STATS')" class="dataOverview">
        <div class="topTitle">
          <div class="descTitle">本机构数据总览</div>
          <div class="rightSelect">
            统计截止日期：{{ getYesterdayDate() }}
          </div>
        </div>
        <div class="bottomItems">
          <div class="item">
            <div class="mainTitle">本机构下属客户</div>
            <div class="subTitle">待使用福分数</div>
            <div class="num">
              <div class="img">
                <img src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/1e518f3a-ca1b-47fd-a877-241e961187fb.png" alt="">
              </div>
              <div class="totalNum">{{ dataNum.unusedScore }}</div>
            </div>
          </div>
          <div class="item">
            <div class="mainTitle">本机构下属客户</div>
            <div class="subTitle">已使用福分数</div>
            <div class="num">
              <div class="img1">
                <img src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/0c262f89-4536-4d28-8729-1deafc4ff507.png" alt="">
              </div>
              <div class="totalNum">{{ dataNum.usedScore }}</div>
            </div>
          </div>
          <div class="item">
            <div class="mainTitle">本机构已发展</div>
            <div class="subTitle">客户数</div>
            <div class="num">
              <div class="img2">
                <img src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/0a9fc204-f943-4a50-addd-13573378db45.png" alt="">
              </div>
              <div class="totalNum">1345</div>
            </div>
          </div>
          <div class="item">
            <div class="mainTitle">本机构已发展实名认证</div>
            <div class="subTitle">客户数</div>
            <div class="num">
              <div class="img3">
                <img src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/de7624eb-d02f-42f4-9bb9-afe3c2931fb9.png" alt="">
              </div>
              <div class="totalNum1">789</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 本机构下属客户福分数据统计 -->
      <div v-if="$access('ENT_C_MAIN_POINT_STATS')" id="customerScore" class="chart" />
      <!-- 本机构发展客户数据统计 -->
      <div id="devCustomer" class="chart1" />
    </div>
    <div class="rightColumn">
      <!-- 本机构开展活动数 -->
      <div class="activityNum">
        <div class="topContent">
          <div class="avator">
            <img src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/a8086dfc-f0ef-4c34-b5d1-5d9a9be015ad.png" alt="">
          </div>
          <div class="rightText">
            <div class="name">机构名称</div>
            <div class="platform">郑邮享-营销平台</div>
          </div>
        </div>
        <div class="bottomChart">
          <div class="echartName">
            <div class="leftText">本机构开展活动数：</div>
            <div class="num">{{ activityData.activityTotal }}</div>
          </div>
          <div class="line" />
          <div id="activityNumPie" class="chart2" />
        </div>
      </div>
      <!-- 活动数据 -->
      <div class="dataActivity">
        <div class="title">活动数据</div>
        <div class="bottomContent">
          <div class="leftCon">
            <div class="topTitle">
              <div class="img" />
              <div class="name">扫码领券</div>
            </div>
            <div class="center">
              <div class="leftText">已开展场次</div>
              <div class="num">{{ activityData.getActivityNum }}</div>
            </div>
            <div class="bottom">
              <div class="leftText">参与人次</div>
              <div class="num">{{ activityData.getTime }}</div>
            </div>
          </div>
          <div class="line" />
          <div class="rightCon">
            <div class="topTitle">
              <div class="img" />
              <div class="name">扫码派券</div>
            </div>
            <div class="center">
              <div class="leftText">已开展场次</div>
              <div class="num">{{ activityData.setActivityNum }}</div>
            </div>
            <div class="bottom">
              <div class="leftText">参与人次</div>
              <div class="num">{{ activityData.setTime }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 快捷入口 -->
      <div class="entry">
        <div class="title">快捷入口</div>
        <div class="list">
          <div v-for="(item,index) in listData" :key="index" class="item" @click="goToRouter(item.url)">
            <div class="icon">
              <img :src="item.icon" alt="">
            </div>
            <div class="textDesc">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  import {ref,onMounted, onUnmounted,nextTick, reactive, getCurrentInstance} from 'vue'
  import {$apiHomePageStatisticsGetDataOverviewStatistics,$apiStatScoreNumDayGetDayScoreStatistics,$apiActivityStatisticsAggregateQueryFilter,$apiActivityStatisticsAggregateQuery} from '@/api/dashboard/index'
  import { useUserStore } from '@/store/modules/user'
  import { useRouter } from 'vue-router'
  const { $access } = getCurrentInstance()!.appContext.config.globalProperties

  const router = useRouter()
  const userStore = useUserStore()
  const dataNum = reactive({
    unusedScore:'',      //待使用福分
    usedScore:''     //已使用福分
  })

  // 活动数据
  const activityData = reactive({
    getActivityNum:'',//领券人数04
    setActivityNum:'',//派券人数06
    getTime:'',//领券场次04
    setTime:'',//派券场次06,
    activityTotal:''//总开展活动数

  })

  // 总开展活动数
  // const activityNum = ref('')
  const listData = ref([
    {name:'商户管理',icon:'https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/412c35a6-ab55-4a6e-b2a7-bc633bcc9b77.png',url:'/mch/list'},
    {name:'机构管理',icon:'https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/798aa0f8-5e0b-44f5-b205-ad2eabed5d88.png',url:'/agent/list'},
    {name:'活动管理',icon:'https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/6aac2f38-f9b6-4bb5-b9ba-0e074c0989ad.png',url:'/activity/other'},
    {name:'限制条件管理',icon:'https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/d19904ec-5329-4079-adbf-0f7596fb4b48.png',url:'/black/list'},
    {name:'福分管理',icon:'https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/c1e57b27-eea0-4ffd-878b-904e63694d5f.png',url:'/score/mall'},
    {name:'用户管理',icon:'https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/003efdd8-7b81-4263-866e-3a102db0b811.png',url:'/client/list'},
    {name:'数据报表',icon:'https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/812eec0d-4a1e-44af-a7a1-54d4e39a8fad.png',url:'/report/auth'},
    {name:'下载管理',icon:'https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/af549cc9-fdbb-4236-a0a8-960205e351ea.png',url:'/download/list'},
  ])

  // 路由跳转
  const goToRouter = (url) =>{
    const prePath  = router.currentRoute.value.path.split('/')[1]
    router.push(`/${prePath}${url}`)
  }

  // 获取昨天日期
  function getYesterdayDate() {
  // 获取当前日期
  const today = new Date()
  
  // 获取昨天的日期
  const yesterday = new Date(today)
  yesterday.setDate(today.getDate() - 1)
  
  // 格式化日期为 YYYY-MM-DD
  const year = yesterday.getFullYear()
  const month = String(yesterday.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以要+1
  const day = String(yesterday.getDate()).padStart(2, '0')
  
  return `${year}-${month}-${day}`
}


  const value1 = ref('1')
  const options1 = ref([
      {value: '1',label: '按天查看',},
      {value: '2',label: '按周查看',},
      {value: '3',label: '按月查看',}
    ])

    // 配色方案
    const colorPalette = [
    '#0671EB', '#24C789', '#FAC858', '#EE6666', 
    '#73C0DE', '#3BA272', '#FC8452', '#9A60B4',
    '#EA7CCC', '#1E90FF', '#FF6347', '#7B68EE'
  ]

  function getHomestayEcharts() {
    // 本机构下属客户福分数据统计
    if(!$access('ENT_C_MAIN_POINT_STATS')){
      return
    }
    const chartDom = document.getElementById('customerScore') as HTMLDivElement
    const myChart = echarts.init(chartDom)
    $apiStatScoreNumDayGetDayScoreStatistics({}).then(res=>{
      const option = {
        title: {
          text: '本机构下属客户福分数据统计',
          left: 'left',
          textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: '600'
          }
        },
        legend: {
          top: 'top',
          right: 10,
          orient: 'horizontal',
          itemGap: 20,
          data: [
            { 
              name: '本机构下属客户待使用福分数',
              icon: 'image://https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/82c1f43b-1895-4bf1-96b7-b5ac271391ea.png',
              itemStyle: {
                color: '#c23531',
                borderColor: '#333',
                borderWidth: 1
              }
            },
            { 
              name: '本机构下属客户已使用福分数',
              icon: 'image://https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/2b09ae2b-7f14-47fe-82f1-21fe7242fd37.png',
              itemStyle: {
                color: '#2f4554',
                borderColor: '#333',
                borderWidth: 1
              }
            }
          ]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderColor: '#eee',
          borderWidth: 1,
          padding: [10, 15],
          textStyle: {
            color: '#333'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: res.dateList,
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          axisLabel: {
            color: '#666',
            rotate:45
          }
        },
        yAxis: {
          type: 'value',
          data: ['100','200','300','400','500','600',],
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              color: ['#f5f5f5'],
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '本机构下属客户待使用福分数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: colorPalette[0]
            },
            itemStyle: {
              color: colorPalette[0]
            },
            emphasis: {
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            data: res.unusedScoreNumList
          },
          {
            name: '本机构下属客户已使用福分数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: colorPalette[1]
            },
            itemStyle: {
              color: colorPalette[1]
            },
            emphasis: {
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            data: res.usedScoreNumList
          }
        ]
      }
      myChart.setOption(option)
    })
    return myChart
  }

  function getOrderEcharts() {
    const chartDom = document.getElementById('devCustomer') as HTMLDivElement
    const myChart = echarts.init(chartDom)
      const option = {
              title: {
                text: '本机构发展客户数据统计',
                left: 'left'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: 'top',
                right: 10,
                orient: 'horizontal',
                itemGap: 20,
                data: [
                  { 
                    name: '本机构已发展客户数',
                    icon: 'rect',
                    itemStyle: {
                      color: '#68B2FF',
                    }
                  },
                  { 
                    name: '本机构已发展实名认证客户数',
                    icon: 'rect',
                    itemStyle: {
                      color: '#0671EB',
                    }
                  }
                ]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['','07-01','07-02','07-03','07-04','07-05','07-06','07-07','07-08','07-09','07-10'],
                axisLine: {
                  lineStyle: {
                    color: '#e0e0e0'
                  }
                },
                axisLabel: {
                  color: '#666',
                  rotate:45
                }
            },
            yAxis: {
                type: 'value',
                data: ['0', '300', '600', '900', '1200', '1500', '1800'],
                axisLine: {
                  lineStyle: {
                    color: '#e0e0e0'
                  }
                },
                axisLabel: {
                  color: '#666'
                },
                splitLine: {
                  lineStyle: {
                    color: ['#f5f5f5'],
                    type: 'dashed'
                  }
                }
            },
            series: [
                {
                    name: '本机构已发展客户数',
                    type: 'bar',
                    stack: 'total',
                    data: ['',400, 200, 900, 700,150,620,150,620,20,780],
                    itemStyle: {
                        color: '#0671EB'
                    }
                },
                {
                    name: '本机构已发展实名认证客户数',
                    type: 'bar',
                    stack: 'total',
                    data: ['',400, 200, 900, 700,150,620,150,620,20,780],
                    itemStyle: {
                        color: '#68B2FF'
                    }
                },
            ]
      }
      
      myChart.setOption(option)
    return myChart
  }
  // 饼图
  function getOrderEcharts1() {
    const chartDom = document.getElementById('activityNumPie') as HTMLDivElement
    const myChart = echarts.init(chartDom)
    $apiActivityStatisticsAggregateQuery({}).then(res=>{
      console.log(res,'饼图返回的数据')
      activityData.activityTotal = res.totalNum
          // 准备数据
    const seriesData = [
        { value: res.GAME.activityNum, name: '互动游戏', itemStyle: {color: '#0671EB'} },
        { value: res.COUPON.activityNum, name: '派券活动', itemStyle: {color: '#68B2FF'} },
        { value: res.ASSIGN.activityNum, name: '定向派券', itemStyle: {color: '#68FFB3'} },
        { value: res.PLATFORM.activityNum, name: '平台活动', itemStyle: {color: '#F8C541'} },
        { value: res.REDUCE.activityNum, name: '立减与折扣', itemStyle: {color: '#7DECFF'} }
    ]
    // 计算总和
    const total = seriesData.reduce((sum, item) => sum + item.value, 0)
    
    // 计算每个类别的百分比
    const dataWithPercent = seriesData.map(item => {
        return {
            ...item,
            percent: ((item.value / total) * 100).toFixed(1) + '%'
        }
    })
    
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 30,
            top: 20,
            formatter: function(name) {
                const item = dataWithPercent.find(d => d.name === name)
                return `${name} : ${item?.percent || '0%'}`
            },
            data: [
                { 
                    name: '互动游戏',
                    icon: 'circle',
                    itemStyle: { color: '#0671EB' }
                },
                { 
                    name: '派券活动',
                    icon: 'circle',
                    itemStyle: { color: '#68B2FF' }
                },
                { 
                    name: '定向派券',
                    icon: 'circle',
                    itemStyle: { color: '#68FFB3' }
                },
                { 
                    name: '平台活动',
                    icon: 'circle',
                    itemStyle: { color: '#F8C541' }
                },
                { 
                    name: '立减与折扣',
                    icon: 'circle',
                    itemStyle: { color: '#7DECFF' }
                }
            ],
            textStyle: {
                rich: {
                    percent: {
                        color: '#666',
                        fontSize: 12,
                        padding: [0, 0, 0, 5]
                    }
                }
            }
        },
        series: [
            {
                name: '活动数',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['20%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: seriesData
            }
        ]
    }
    myChart.setOption(option)

    })
    
    
    return myChart
}

    // 图表实例数组
    let charts: echarts.ECharts[] = []
  // 初始化所有图表
  function initCharts() {
    charts = [
      getHomestayEcharts(),
      getOrderEcharts(),
      getOrderEcharts1(),
    ]

    nextTick(()=>{
      handleResize()
    })
  }
  
  // 窗口大小改变时重新调整图表大小
  function handleResize() {
    charts.forEach(chart => {
      chart?.resize()
    })
    
  }
  
  onMounted(() => {
    initCharts()
    window.addEventListener('resize', handleResize)
    // 数据总览
    if($access('ENT_C_MAIN_OVERVIEW_STATS')){
      $apiHomePageStatisticsGetDataOverviewStatistics({}).then(res=>{
        dataNum.unusedScore= res.unusedScore 
        dataNum.usedScore =   res.usedScore
      })
    }
    // 本机构开展活动数
    if($access('ENT_C_MAIN_ACTIVITY_NUM_STATS')){
      $apiActivityStatisticsAggregateQueryFilter({}).then(res=>{
        activityData.getActivityNum = res[0].activityNum
        activityData.setActivityNum = res[1].activityNum
        activityData.getTime = res[0].joinManTime
        activityData.setTime = res[1].joinManTime
      })
    }
  })
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    charts.forEach(chart => {
      chart?.dispose()
    })
  })
</script>

<style lang="less" scoped>
  .dashboard-container{
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #f5f7fa;
    
    @media (min-width: 1200px) {
      flex-direction: row;
    }
    
    .leftColumn {
      display: flex;
      flex-direction: column;
      gap: 15px;
      width: 100%;
      
      @media (min-width: 1200px) {
        width: calc(75% - 7.5px);
      }
    }
    .rightColumn {
      display: flex;
      flex-direction: column;
      gap: 15px;
      width: 100%;
      
      @media (min-width: 1200px) {
        width: calc(25% - 7.5px);
      }
    }
    
    .dataOverview{
      width: 100%;
      // height: auto;
      min-height: 204px;
      border-radius: 12px;
      background: url('https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/4a90632e-93b4-4a01-bf7f-8a1c6bd5163f.png') no-repeat center center;
      background-size: cover;
      padding: 20px 16px;
      box-sizing: border-box;
      
      .topTitle{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .descTitle{
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #333333;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .rightSelect{
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #0671EB;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
      
      .bottomItems{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        margin-top: 8px;
        
        .item{
          width: 100%;
          height: 124px;
          background: rgba(255,255,255,0.6);
          box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.06);
          border-radius: 6px;
          border: 1px solid #FFFFFF;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 10px;
          box-sizing: border-box;
          
          .mainTitle, .subTitle{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            text-align: center;
            font-style: normal;
            text-transform: none;
            white-space: nowrap;
          }
          
          .num{
            display: flex;
            align-items: center;
            // margin-top: 10px;
            .img{
              width: 22px;
              height: 22px;
              border-radius: 2px;
              img{
                width: 100%;
                height: 100%;
                border-radius: 2px;
              }
            }
            .img1{
              width: 22px;
              height: 22px;
              border-radius: 2px;
              img{
                width: 100%;
                height: 100%;
                border-radius: 2px;
              }
            }
            .img2{
              width: 22px;
              height: 22px;
              border-radius: 2px;
              img{
                width: 100%;
                height: 100%;
                border-radius: 2px;
              }
            }
            .img3{
              width: 22px;
              height: 22px;
              border-radius: 2px;
              img{
                width: 100%;
                height: 100%;
                border-radius: 2px;
              }
            }
            .totalNum, .totalNum1{
              font-family: DIN, DIN;
              font-weight: bold;
              font-size: 28px;
              text-align: center;
              font-style: normal;
              text-transform: none;
              padding-left: 6px;
            }
            
            .totalNum{
              color: #333333;
            }
            
            .totalNum1{
              color: #52C41A;
            }
          }
        }
      }
    }
    
    .chart, .chart1 {
      width: 100%;
      height: 225px;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 15px;
      box-sizing: border-box;
      @media (max-width: 768px) {
        height: 300px;
      }
    }

     .chart1 {
      width: 100%;
      height: 324.5px;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 15px;
      box-sizing: border-box;
      @media (max-width: 768px) {
        height: 324.5px;
      }
    }
    .chart2 {
      height: 160px;
    }
    
    .activityNum{
      width: 100%;
      // height: auto;
      min-height: 300px;
      background: #FFFFFF;
      border-radius: 12px;
      
      .topContent{
        display: flex;
        padding: 25px 0 15px 20px;
        box-sizing: border-box;
        height: 120px;
        background: url('https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/75b60e74-bec8-4be0-ad11-616a6fd7a3cd.png') no-repeat center center;
        background-size: cover;
        border-radius: 12px 12px 0 0;
        
        .avator{
          width: 56px;
          height: 56px;
          border-radius: 50%;
          overflow: hidden;
          
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .rightText{
          height: 56px;
          margin-left: 10px;
          
          .name{
            margin-top: 5px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          
          .platform{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #0671EB;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
      
      .bottomChart{
        position: relative;
        z-index: 1;
        height: auto;
        max-height: 180px;
        margin-top: -40px;
        background: #FFFFFF;
        border-radius: 0 0 12px 12px;
        padding: 20px;
        box-sizing: border-box;
        
        .echartName{
          display: flex;
          align-items: center;
          height: 28px;
          
          .leftText{
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #666666;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          
          .num{
            font-family: DINCond-Black, DINCond-Black;
            font-weight: 400;
            font-size: 40px;
            color: #0671EB;
            letter-spacing: 2px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-left: 10px;
          }
        }
        
        .line{
          width: 100%;
          height: 1px;
          background: #E5E5E5;
          margin: 10px 0;
        }
      }
    }
    
    .dataActivity{
      width: 100%;
      height: auto;
      min-height: 144px;
      background: linear-gradient(360deg, #FFFFFF 63%, #98CDFF 100%);
      border-radius: 12px;
      padding: 20px 0 15px 15px;
      box-sizing: border-box;
      
      .title{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 15px;
      }
      
      .bottomContent{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 15px;
        
        .line{
          // margin-top: 10px;
          position: relative;
          top:15px;
          width: 1px;
          height: 68px;
          background: #E5E5E5;
        }
        
        .leftCon, .rightCon{
          flex: 1;
          padding: 0 10px;
          
          .topTitle{
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            
            .img{
              width: 20px;
              height: 20px;
              border-radius: 4px;
              background: url('https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/5b1a4542-e274-450e-a462-6ac329cbd0bd.png') no-repeat center center;
              background-size: cover;
            }
            
            .name{
              margin-left: 4px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #666666;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
          
          .center, .bottom{
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            
            .leftText{
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              text-align: left;
              font-style: normal;
              text-transform: none;
              line-height: 32px;
            }
            
            .num{
              font-family: DIN, DIN;
              font-weight: bold;
              font-size: 20px;
              color: #333333;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }
    
    .entry{
      width: 100%;
      // height: auto;
      min-height: 200px;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 15px;
      box-sizing: border-box;
      
      .title{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 10px;
      }
      
      .list{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
        
        .item{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px 0;
          cursor: pointer;
          
          .icon{
            width: 44px;
            height: 44px;
            background: #E7F1FD;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 4px;
            
            img{
              width: 24px;
              height: 24px;
              object-fit: contain;
            }
          }
          
          .textDesc{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 13px;
            color: #333333;
            text-align: center;
            font-style: normal;
            text-transform: none;
            white-space: nowrap;
          }
        }
      }
    }
  }
</style>